<%= project_layout(@project) do %>
  <%= turbo_frame_tag "new_service" do %>
      <%= link_to new_project_service_path(@project) do %>
        <button class="btn btn-primary btn-sm inline-flex">
          <iconify-icon icon="lucide:plus" height="16"></iconify-icon>
          <span class="hidden md:inline">New Service</span>
        </button>
      <% end %>
    <% end %>
  </div>
  <div class="overflow-x-auto mt-2" data-controller="telepresence-guide">
    <% if @project.services.empty? %>
      <div>
        <p class="text-gray-500">No services yet</p>
      </div>
    <% else %>
      <div class="mt-1 space-y-4">
        <% @services.each do |service| %>
        <div class="collapse collapse-plus bg-base-200 hover:bg-base-200/40">
          <input aria-label="Accordion radio" class="w-full" type="radio" name="accordion" />
          <div class="collapse-title">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2 text-xl font-medium">
                <% if service.web_service? %>
                  <iconify-icon icon="lucide:globe" height="16"></iconify-icon>
                <% elsif service.background_service? %>
                  <iconify-icon icon="lucide:cpu" height="16"></iconify-icon>
                <% elsif service.cron_job? %>
                  <iconify-icon icon="lucide:clock" height="16"></iconify-icon>
                <% end %>
                <%= service.name %>
              </div>
              <div class="my-1">
                <%= render "projects/services/status", service: service %>
              </div>
            </div>
          </div>
          <div class="collapse-content">
            <div data-controller="turbo-tabs">
              <%= render "projects/services/tabs", service:, tab: "overview" %>
              <%= render "projects/services/show", service:, tab: "overview" %>
            </div>
          </div>
        </div>
        <% end %>
      </div>
    <% end %>
  </div>
<% end %>
